<template>
	<view class="box" v-if="list.status">
		<view class="header">
			<!-- 待审核 -->
			<view class="title flex flex-jc-sb" v-if="list.status === 1">
				<view>进行中</view>
			</view>

			<!-- 未通过 -->
			<view class="title flex flex-jc-sb" v-if="list.status === 2">
				<view>待上传发票</view>
			</view>

			<!-- 待补充资料 -->
			<view class="title flex flex-jc-sb" v-if="list.status === 3">
				<view>待审核</view>
			</view>

			<!-- 待付款 -->	
			<view class="title flex flex-jc-sb" v-if="list.status === 4">
				<view>待结算</view>
			</view>

			<!-- 待提车 -->
			<view class="title flex flex-jc-sb" v-if="list.status === 5">
				<view>已结算</view>
			</view>

			<!-- 已完成 -->
			<view class="title flex flex-jc-sb" v-if="list.status === 6">
				<view>已失效</view>
			</view>

			<!-- 用户信息 -->
			<view class="flex flex-jc-sb name" @click="goPage">
				<view class="flex flex-ai-c">
					<image :src="list.headImg" style="width: 56rpx;height: 56rpx;border-radius: 50%;" mode="aspectFill"></image>
					<view style="margin-left: 20rpx;">{{list.name}}</view>
					<view class="flex flex-ai-c">
						<view style="margin-left: 20rpx;" class="flex" v-if="list.isPartner">
							<image src="https://files.yzsheng.com/client/order/hehuorenicon.png" style="width: 45rpx;height: 41rpx;"></image>
						</view>
						<view style="margin-left: 20rpx;" class="flex" v-if="list.isCarOwner">
							<image src="https://files.yzsheng.com/client/order/chebiao.png" style="width: 45rpx;height: 41rpx;"></image>
						</view>
					</view>
				</view>
				<view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>

			</view>

		</view>

		<view class="main">
			<!-- card -->
			<view class="card">
				<view class="flex" style="padding: 20rpx 0;">
					<view @click="goStore">
						<i-icon icon="icondianpu" type="single" size="32rpx" color="rgb(255,225,60)"></i-icon>{{list.storeName}}
					</view>
					<view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="flex">
					<view class="img">
						<image v-if="list.carImg" style="width: 198rpx;height: 132rpx;" :src="JSON.parse(list.carImg)[0].Img"></image>
					</view>
					<view>
						<view class="title">{{list.carName}}</view>
						<view class="prcie">厂家指导家：<text>{{list.factoryPrice}}万</text></view>
					</view>
				</view>

				<!-- 外观内饰: -->
				<view v-if="color !== '' ">
					<view class="title flex flex-ai-c">
						<view style="letter-spacing: 6.5rpx;">
							外观内饰:
						</view>
						<view class="flex flex-ai-c colorList" style="margin-left: 40rpx;">
							<view class="flex flex-ai-c flex-wrap-w">
								<view class="color" :style="{background:color.outerColour.colorCoding}"></view>

								<view>外观+内饰</view>
								<view class="colorCoding flex" v-if="color.inColour.neiColor.length===1">
									<view class="color" style="margin-left: 10rpx;" :style="{background:color.inColour.colorCoding}"></view>
									<view class="color" :style="{background:color.inColour.neiColor[0]}"></view>
								</view>
								<view v-else>
									<view style="margin-left: 10rpx;" class="color" :style="{background:color.inColour.colorCoding}"></view>
								</view>

							</view>

						</view>
					</view>
				</view>

				<!-- card-btn -->
				<view class="btns" style="padding-bottom: 20rpx;border-bottom: 2rpx solid #EEEEEE;">
					<view class="flex btns-lx flex-ai-c flex-jc-c" @click="contact(list)">
						<view>
							<i-icon icon="iconxiaoxi" type="single" size="32rpx"></i-icon>
						</view>
						<view>联系门店</view>
					</view>
					<view class="flex flex-ai-c flex-jc-c btns-zd" @click="phone(list.storePhone)">
						<view>
							<i-icon icon="icondianhua" type="single" size="28rpx"></i-icon>
						</view>
						<view>致电门店</view>
					</view>
				</view>
				<view class="flex flex-jc-fe" style="font-size: 24rpx; color: #666666;padding-top: 20rpx">
					<view style="margin:0 20rpx 30rpx 20rpx;" class="flex flex-ai-c">
						<view style="margin-right: 10rpx;" class="flex flex-ai-c">
							<!-- 待付款 -->
							<!-- <view class="flex" style="margin-right: 10rpx;"><i-icon icon="iconwenhao1" color="#EB5C02"></i-icon></view> -->
							<!-- 其他 -->
							<view class="flex" style="margin-right: 10rpx;">
								<i-icon icon="iconwenhao1" color="#FBB000"></i-icon>
							</view>

							购车保证金：
							<text style="color: #EB5C02;font-weight: bold;">￥{{list.payMoney}}</text>
						</view>
						<view>合计：<text style="font-weight: bold;">￥{{list.payMoney}}</text></view>
					</view>

				</view>
			</view>

			<!-- 方案 -->
			<view class="plan">
				<view class="icons flex flex-jc-sb flex-ai-c">
					<view class="flex flex-ai-c">
						<!-- 勾选 -->
						<i-icon icon="iconiconfontxuanzhong" type="single" size="30rpx" color="#FBBC00"></i-icon>
						<view style="margin-left: 20rpx;">个人户方案</view>
					</view>
					<view class="flex flex-ai-c" @click="show = true">
						<view style="font-size: 22rpx;color: #999999;margin-right: 10rpx;">方案说明</view>
						<view>
							<i-icon icon="iconwenhao1" color="#B4B4B4" size="30rpx"></i-icon>
						</view>
					</view>
				</view>

				<!-- <view class="icons flex flex-jc-sb flex-ai-c">
					<view class="flex flex-ai-c">
						
						<i-icon icon="iconiconfontxuanzhong" type="single" size="30rpx" color="#FBBC00"></i-icon>
						<view style="margin-left: 20rpx;">公司方案</view>
					</view>
					<view class="flex flex-ai-c" @click="company = true">
						<view style="font-size: 22rpx;color: #999999;margin-right: 10rpx;">方案说明</view>
						<view>
							<i-icon icon="iconwenhao1" color="#B4B4B4" size="30rpx"></i-icon>
						</view>
					</view>
				</view> -->

				<view class="flex flex-jc-sa botton flex-ai-c">
					<view>
						<view class="num">{{list.payMentMoney | million}}</view>
						<view class="text">首付(20%)</view>
					</view>
					<view>
						<view class="num">{{list.monthMoney | million}}</view>
						<view class="text">月供</view>
					</view>
					<view>
						<view class="num">{{list.monthCount}}</view>
						<view class="text">期数</view>
					</view>
				</view>

			</view>

			<!-- 待上传发票 -->
			<view class="upload" v-if="list.status === 2">
				<view class="title">7迈车百亿补贴</view>
				<view>
					<view class="flex">
						<view>
							<view class="yuan"></view>
						</view>
						<view class="content">
							<view>在7迈车成功购车并上传发票用户将自动成为7迈车品牌大使享受百亿补贴；</view>
							<view style="color:#FBB000;">(视车价，平均每辆补贴1000元左右)</view>
						</view>
					</view>
					<view>
						<view class="flex">
							<view>
								<view class="yuan"></view>
							</view>
							<view class="content">
								<view>为保证用户权益，如末收到发票务必向门店索要，如不提供发票造假、发票少开等，一经查实必定严惩门店。</view>
							</view>
						</view>
					</view>
				</view>

				<!-- upload -->
				<view class="flex flex-jc-c">
					<view class="img" @click="uploadInvoice">
						<view class="yuan" v-show="!invoiceUrl">
							<image src="https://files.yzsheng.com/client/order/fapiao.png"></image>
							<view class="xiangji">
								<i-icon icon="iconicon1" color="#FFFFFF" size="68rpx"></i-icon>
							</view>
						</view>

						<image class="logo-icon" :src="invoiceUrl" mode="scaleToFill"></image>
					</view>
				</view>
				<view style="text-align: center;line-height: 80rpx;">上传机动车销售统一发票、行驶证照片、保单发票</view>
			</view>
			
			<!-- 查看上传的发票 -->
			<view class="upload" v-if="list.status === 3 || list.status === 4 || list.status === 5">
				<!-- upload -->
				<view class="flex flex-jc-c">
					<view>
						<view style="margin-top: 30rpx;border: 0;">
							<image :src="list.orderImgUrl"></image>
						</view>
					</view>
				</view>
				<view style="text-align: center;line-height: 80rpx;font-weight: bold;">机动车销售统一发票</view>
			</view>

			<!-- 失效原因 -->
			<view class="reason" v-if="list.status === 6">
				<view style="margin-left: 20rpx;">
					失效原因
				</view>
				<view class="order-card">
					<view style="height: 170rpx;">
						<text v-text="list.reason"></text>
					</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="order">
				<view style="margin-left: 20rpx;">
					订单信息
				</view>
				<!-- 待补充 -->

				<!-- 待审核 -->
				<view class="order-card" v-if="list.status === 3">
					<view class="flex">
						<view class="flex">
							<view style="width: 180rpx;color: #999999;">流水号：</view>
							<view>{{list.orderNo}}</view>
							<!-- <view style="margin-left: 50rpx;"></view> -->
						</view>
						<view class="copy" @click="copyUrl">复制</view>
					</view>
					<view class="flex">
						<view style="width: 180rpx;color: #999999;">提车时间：</view>
						<view>{{list.getCarTime}}</view>
					</view>
					<view class="flex">
						<view style="width: 180rpx;color: #999999;">上传发票：</view>
						<view>{{list.clientAddTime}}</view>
					</view>
					<view class="flex">
						<view style="width: 180rpx;color: #999999;">上传资料：</view>
						<view>{{list.storeAddTime}}</view>
					</view>
				</view>

				<!-- 进行中 待上传发票-->
				<view class="order-card" v-if="list.status === 1 || list.status === 2">
					<view class="flex">
						<view style="color: #999999;" class="flex flex-jc-sb">
							<view style="color: #999999;width: 160rpx;">流水号：</view>
							<view>{{list.orderNo}}</view>
							<view class="copy" @click="copyUrl">复制</view>
						</view>
						
					</view>
				</view>

				<!-- 待结算 已失效-->
				<view class="order-card" v-if="list.status === 4 || list.statusStr === 6">
					<view class="flex">
						<view style="color: #999999;" class="flex">
							<view style="width: 180rpx;color: #999999;color: #999999;">流水号：</view>
							<view>{{list.orderNo}}</view>
							<!-- <view style="margin-left: 50rpx;"></view> -->
						</view>
						<view class="copy" @click="copyUrl">复制</view>
					</view>
					<view class="flex">
						<view style="width: 180rpx;color: #999999;">提车时间：</view>
						<view>{{list.getCarTime}}</view>
					</view>
					<view class="flex">
						<view style="width: 180rpx;color: #999999;">上传发票：</view>
						<view>{{list.clientAddTime}}</view>
					</view>
					<view class="flex">
						<view style="width: 180rpx;color: #999999;">上传资料：</view>
						<view>{{list.storeAddTime}}</view>
					</view>
				</view>
				<!-- 已结算 -->
				<view class="order-card" v-if="list.status === 5">
					<view class="flex">
						<view style="color: #999999;" class="flex">
							<view style="width: 180rpx;">流水号：</view>
							<view class="haoma">{{list.orderNo}}</view>
							<!-- <view style="margin-left: 50rpx;"></view> -->
						</view>
						<view class="copy" @click="copyUrl">复制</view>
					</view>
					<view class="flex">
						<view style="width: 180rpx;color: #999999;">提车时间：</view>
						<view>{{list.getCarTime}}</view>
					</view>
					<view class="flex">
						<view style="width: 180rpx;color: #999999;">上传发票：</view>
						<view>{{list.clientAddTime}}</view>
					</view>
					<view class="flex">
						<view style="width: 180rpx;color: #999999;">上传资料：</view>
						<view>{{list.storeAddTime}}</view>
					</view>

					<view class="flex">
						<view style="width: 180rpx;color: #999999;">服务商审核：</view>
						<view>{{list.serviceAddTime}}</view>
					</view>
					<view class="flex">
						<view style="width: 180rpx;color: #999999;">平台审核：</view>
						<view>{{list.orderCompleteTime}}</view>
					</view>
					<view class="flex">
						<view style="width: 180rpx;color: #999999;">结算时间：</view>
						<view>{{list.orderCompleteTime}}</view>
					</view>

					<view class="flex">
						<view style="width: 180rpx;color: #999999;">收入：</view>
						<view>{{list.inMoney}}</view>
					</view>
					<view class="flex">
						<view style="width: 180rpx;color: #999999;">支付方式：</view>
						<view>{{list.payMethod}}</view>
					</view>
				</view>
			</view>

			<!-- btn -->
			<view class="btn flex flex-ai-c flex-jc-c" v-if="list.status === 2">
				<view class="btn-content" @click="preservation">
					<view class="btn-content-up">代上传发票</view>
				</view>
				<view>

				</view>
			</view>

			<!-- 方案说明 -->
			<u-popup v-model="show" border-radius="30" mode="bottom" :safe-area-inset-bottom="true" :closeable="true" height="490rpx">
				<view class="popup">
					<view class="title">个人方案</view>
					<view class="content">
						个人户方案，是7迈车采用常规银行及厂家金融方案模式，由具备分期购车特许资质的银行、厂家金融为客户提供的一种分期购车服务。
						客户以分期支付的方式，以较低的门槛享受到汽车使用权和所有权。
					</view>
				</view>

			</u-popup>
			<!-- 公司说明 -->
			<u-popup v-model="company" border-radius="30" mode="bottom" :safe-area-inset-bottom="true" :closeable="true" height="490rpx">
				<view class="popup">
					<view class="title">公司方案</view>
					<view class="content">
						公司户方案，是7迈车采用国际成熟的融资租赁模式，由具备融资租赁特许资质的融资租赁公司为客户提供的全新购车服务,
						享受更低的首付，更灵活的月供；客户以分期支付租金的方式，以较低的门槛先期享受到了汽车的使用权，并将在支付
						全部租金及留购价之后获得车辆所有权。
					</view>
				</view>

			</u-popup>
			<!-- <u-toast ref="uToast" /> -->
		</view>

	</view>
</template>

<script>
	import timLogin from '@/utils/timLogin.js'
	export default {
		data() {
			return {
				color: [],
				id: '', //订单id
				agreeBuy: false, //用户购车协议
				isAgree: true, //false我同意选择  true未选择
				company: false, //公司方案
				show: false, //个人方案
				isOpen: false, //方案说明是否打开
				content: '2020-05-21 15：16：22',
				list: {}, //详情的数据
				invoiceUrl: '', //上传发票地址
				storeId:'',
				userId:'',
			}
		},
		filters: {
		  million(value) { //过万处理
		  	let num
		  	if (value > 9999) { //大于9999显示x.xx万
		  		num = ((value / 1000) / 10).toFixed(2) + '万'
		  	} else if (value <= 9999 && value >= -9999) {
		  		num = value + '元'
		  	} else if (value < -9999) { //小于-9999显示-x.xx万
		  		num = -((Math.abs(value) / 1000) / 10).toFixed(2) + '万'
		  	}
		  	return num
		  },
		},
		onLoad(status) {
			// console.log(status)
			this.id = status.id
			
			
			
			console.log(this.color, '123')
		},
		onShow() {
			/* uni.$on('color',data =>{
				this.color = data
				console.log(this.color,'颜色')
				this.off()
			}) */
		},
		created() {
			this.getShareOrderDetailInfo()
		},
		methods: {
			goStore(){
				uni.navigateTo({
					url:'/pages_store/newCarStore/index/index?storeid='+this.storeId
				})
			},
			//个人详情
			goPage(){
				uni.navigateTo({
				  url: '/pages_userModule/memberDetails/memberDetails?from=chat&id='+this.userId
				})
			},
			getCont(types){
				console.log(types)
				this.$store.commit('news/createConversationActive', {
				  user: types.storeName, //店铺名称
				  img: types.storeImg, //店铺头像
				  lastTime: '', //
				  userId: types.storeId, //店铺id
				  conversationID: 'C2C',
				})
				this.$store.commit('news/setCardInfo', {
				  imgSrc: JSON.parse(types.carImg)[0].Img,
				  name: types.carName,
				  type: 'resaleCar',
				  price: types.factoryPrice+'万',
					goPage:'3',
					payment: types.payMoney,//首付
					monthly: types.monthMoney//月供
				})
				uni.navigateTo({
				  url: '/pages_common/contactSeller/contactSeller?user=' + types.storeName + '&pageId=' + types.orderId+ '&tab=1'+'&userId'+this.userId
				})
				/* uni.navigateTo({
					url: '/pages_common/room/room?user=' + this.list.storeName
				}) */
			},
			contact(types) {
				if (this.$store.state.isSDKReady) {
				  this.getCont(types)
				} else {
				  timLogin(() => {
				    this.getCont(types)
				  })
				}
			},
			// 拨打电话
			phone(num) {
				uni.makePhoneCall({
					phoneNumber: num
				})
			},
			//获取订单详情
			async getShareOrderDetailInfo() {
				try {
					let data = {
						"orderId": this.id
					}
					const res = await this.$api.order.getShareOrderDetailInfo(data)
					console.log(res)
					this.color = JSON.parse(res.data.color)
					this.storeId = res.data.storeId
					this.list = res.data
					this.userId = res.data.userId
				} catch (e) {

				}
			},
			//勾选免责
			agree() {
				this.isAgree = !(this.isAgree)
			},
			//上传发票
			uploadInvoice() {
				uni.chooseImage({
					count: 1,
					success: e => {
						console.log(e.tempFilePaths[0], '头像')
						this.$api.files.uploadImg({
							filePath: e.tempFilePaths[0]
						}).then(res => {
							console.log(res, 'img')
							this.invoiceUrl = 'https://ztc.yzsheng.com' + res.url
						}).catch(err => {
							console.log(err)
						})
					}
				})

			},
			//保存发票
			async preservation() {
				try {
					let data = {
						"invoiceUrl": this.invoiceUrl,
						"orderId": this.id
					}
					const res = await this.$api.order.uploadInvoice(data)
					console.log(res)
					this.$u.toast('上传成功')
				} catch (e) {

				}
			},
			//复制
			copyUrl() {
				uni.setClipboardData({
					data: this.list.orderNo,
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: '复制成功',
						})
					},
					fail: (err) => {
						console.log(err)
						uni.showToast({
							title: "复制失败"
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './promotion_details.scss';
</style>
